<html>
<head>
<title>jQuery Animated Bar Plugin</title>
<meta charset="UTF-8">
<!-- <link href="css/demo.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/jqbar.css" /> -->
<!-- <link rel="stylesheet" href="css/jqbar.css" />  -->
<style type="text/css">
.jqbar{position: relative;top: 100px;}
.jqbar.vertical{text-align: center;display: inline-block;}
.jqbar.vertical span{display: block; font-size: 16px; padding-top:15px; font-weight: bold;}
.jqbar.vertical .bar-percent{font-size: 11px;font-weight: bold;position: absolute;height: 20px;margin-bottom: 5px;width: 100%;}
.jqbar.vertical .bar-level-wrapper{position: relative;display: inline-block;overflow: hidden;}
.jqbar.vertical .bar-level{position: absolute;}
/*horizontal*/
.jqbar.horizontal span{display: inline-block;margin-left: 5px;font-size: 11px;font-weight: bold;}
.jqbar.horizontal .bar-percent{font-size: 11px;font-weight: bold;height: 20px;margin-bottom: 5px;}

#graph{width: 780px; height:300px; border:1px solid red; position:relative;}
#bar-1{top: 50px; left: 60px;}
#bar-2{top: 50px; left: 65px;}
#bar-3{top: 50px; left: 70px;}
#bar-4{top: 50px; left: 75px;}
#bar-5{top: 50px; left: 80px;}
#bar-6{top: 50px; left: 85px;}
#bar-7{top: 50px; left: 90px;}
#bar-8{top: 50px; left: 95px;}
#bar-9{top: 50px; left: 100px;}
#bar-10{top: 50px; left: 105px;}
#bar-11{top: 50px; left: 110px;}
#bar-12{top: 50px; left: 115px;}
#bar-13{top: 50px; left: 120px;}
#bar-14{top: 50px; left: 125px;}
#bar-15{top: 50px; left: 130px;}
#leftText{position: absolute; top:0px; left:3px; font-family: '微软雅黑';}
#botText{position: absolute; bottom:16px; right:0px; font-family: '微软雅黑';}
#leftLine{width:2px; height:276px; background:#5f5f5f; position:absolute; top:0px; left:28px;}
#botLine{width:705px; height:2px; background:#5f5f5f; position:absolute; bottom:23px; left:28px; } 
</style>
</head>
<body>
<div id="graph">
    <div id="leftText">访<br>问<br>人<br>数</div>
    <div id="botText">节目</div>
    <div id="leftLine"></div>
    <div id="botLine"></div>
    <div id="bar-1"></div>
    <div id="bar-2"></div>
    <div id="bar-3"></div>
    <div id="bar-4"></div>
    <div id="bar-5"></div>
    <div id="bar-6"></div>
    <div id="bar-7"></div>
    <div id="bar-8"></div>
    <div id="bar-9"></div>
    <div id="bar-10"></div>
    <div id="bar-11"></div>
    <div id="bar-12"></div>
    <div id="bar-13"></div>
    <div id="bar-14"></div>
    <div id="bar-15"></div>
</div>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jqbar.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#bar-1').jqbar({label:'1',barColor:'#b0d7f8',value:444,orientation:'v'});
        $('#bar-2').jqbar({label:'2',barColor:'#F7BE0F',value:857,orientation:'v'});
        $('#bar-3').jqbar({label:'3',barColor:'#8DB900',value:671,orientation:'v'});
        $('#bar-4').jqbar({label:'4',barColor:'#FD9144',value:494,orientation:'v'});
        $('#bar-5').jqbar({label:'5',barColor:'#028E8F',value:761,orientation:'v'});
        $('#bar-6').jqbar({label:'6',barColor:'#D74546',value:900,orientation:'v'});
        $('#bar-7').jqbar({label:'7',barColor:'#8E468F',value:630,orientation:'v'});
        $('#bar-8').jqbar({label:'8',barColor:'#588526',value:580,orientation:'v'});
        $('#bar-9').jqbar({label:'9',barColor:'#B2AA01',value:376,orientation:'v'});
        $('#bar-10').jqbar({label:'10',barColor:'#D74546',value:670,orientation:'v'});
        $('#bar-11').jqbar({label:'11',barColor:'#8E468F',value:630,orientation:'v'});
        $('#bar-12').jqbar({label:'12',barColor:'#598525',value:376,orientation:'v'});
        $('#bar-13').jqbar({label:'13',barColor:'#B2AA01',value:635,orientation:'v'});
        $('#bar-14').jqbar({label:'14',barColor:'#018ED6',value:494,orientation:'v'});
        $('#bar-15').jqbar({label:'15',barColor:'#9E0710',value:761,orientation:'v'});
    });
</script>
</body>
</html>
